<template>
  <div
    class="content-wrapper"
    v-loading.fullscreen.lock="fullscreenLoading"
    :before-close="handleClose"
  >
    <el-row class="content-row">
      <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="100px">
        <el-row>
          <el-col :span="20">
            <el-form-item v-if="!subjectId" label="帖子位置" prop="position">
              <el-select
                v-model="addForm.position"
                style="width: 100%"
                filterable
                clearable
                placeholder="请选择帖子位置">
                <el-option v-for="(k,v) in positions" :key="v" :label="k" :value="v"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所在城市" prop="location">
              <el-input v-model="addForm.location" @focus="viewCity" placeholder="请选择所在城市"></el-input>
            </el-form-item>

            <el-form-item label="帖子内容" prop="content">
              <el-input
                type="textarea"
                rows="8"
                maxlength="200"
                v-model="addForm.content"
                placeholder="最过不超过200字，不支持特殊符号"
              ></el-input>
            </el-form-item>

            <el-form-item label="帖子类型" prop="type">
               <el-radio-group v-model="addForm.type">
                <el-radio v-for="(k,v) in types" :key="v" :label="v">{{k}}</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item v-if="addForm.type === '2'" prop="imageList">
              <el-upload
                :action="uploadUrl"
                list-type="picture-card"
                :class="{disabled:uploadNumPro==9}"
                :limit="limit"
                multiple
                :on-preview="handlePreviewAvatarUpload"
                :on-success="successAvatarUpload"
                :before-upload="beforeSingleAvatarUpload"
                :on-remove="handleRemoveAvatarUpload"
              >
              <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="isPreview" size="tiny" append-to-body>
                <img width="100%" :src="previewUrl" alt />
              </el-dialog>
              <div>图片建议尺寸:347x66像素,大小&lt;=200KB</div>
            </el-form-item>

            <el-form-item v-if="addForm.type === '3'" prop="fileName">
              <el-upload v-if="addForm.type === '3'"
                ref="audioUpload"
                :action="uploadUrl"
                :class="{disabled:uploadNumPro==1}"
                :limit="limit"
                :on-success="audioSuccessUpload"
                :before-upload="audioBeforeUpload"
                :on-remove="handleRemoveAudio"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
              <div>音频建议大小&lt;=5M</div>
            </el-form-item>


            <el-form-item v-if="addForm.type === '4'" prop="fileName">
              <el-upload v-if="addForm.type === '4'"
                ref="videoUpload"
                :action="uploadUrl"
                :class="{disabled:uploadNumPro==1}"
                :limit="limit"
                :on-success="videoSuccessUpload"
                :before-upload="videoBeforeUpload"
                :on-remove="handleRemoveVideo"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
              <div>视频建议大小&lt;=5M</div>
            </el-form-item>


            <!-- <el-form-item label="帖子媒体" prop="media">
              <el-upload
                :action="uploadUrl"
                class="upload-box"
                :limit="limit"
                multiple
                :on-preview="handlePreviewAvatarUpload"
                :on-success="successAvatarUpload"
                :on-remove="handleRemoveAvatarUpload"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              <el-dialog :visible.sync="isPreview" size="tiny" append-to-body>
                <img width="100%" :src="previewUrl" alt />
              </el-dialog>
            </el-form-item> -->

          </el-col>
        </el-row>
      </el-form>
    </el-row>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="closeTab">取 消</el-button>
      <el-button type="primary" @click="saveForm('addForm',0)">保存</el-button>
      <el-button type="primary" @click="saveForm('addForm',1)">发布</el-button>
    </div>

    <city-tree v-if="treeDialog" @handleclose="viewinf" />
  </div>
</template>

<script>
import CityTree from "../../../common/CityTree";
import { addPost } from "../../../../api/bbs/post";

export default {
  name: "postAdd",
  props:{
    subjectId:{
      type: String,
      required: false
    }
  },
  data() {
    return {
      treeDialog: false,
      types: {},
      positions: {},
      fullscreenLoading: false,
      uploadUrl: "https://lht.ah-zk.com/qjt/fs/file/upload",
      origin: "https://lht.ah-zk.com/qjt/fs/origin",
      previewUrl: "",
      isPreview: false,
      uploadNumPro: 0,
      limit: 9,
      picList: [],
      addForm: {
        position: '1',
        location: '',
        content: '',
        imageList: [],
        cityList: [],
        type: '1',
        fileName: '',
      },
      addRules: {
        position: [
          {
            required: true,
            message: "请选择话题位置",
            trigger: ["blur", "change"]
          }
        ],
        content: [
          {
            required: true,
            message: "请输入帖子内容",
            trigger: ["blur", "change"]
          }
        ],
        cityName: [
          {
            required: true,
            message: "请选择发布城市",
            trigger: ["blur", "change"]
          }
        ],

      }
    };
  },
  created() {
    this.enumMap('SubjectEnum.PositionEnum','com.zlll.winner.enums.bbs').then(res=>{if(res) this.positions = res });
    this.enumMap('PostEnum.TypeEnum','com.zlll.winner.enums.bbs').then(res=>{if(res) this.types = res });
  },
  components: {
    CityTree
  },
  methods: {
    
    handlePreviewAvatarUpload(file) {
      console.log("handlePreviewAvatarUpload===>", file);
      this.previewUrl = file.url;
      this.isPreview = !this.isPreview;
    },
    audioSuccessUpload(res, file, fileList){
      this.addForm.fileName = res.files[0].path+"."+res.files[0].suffix;
      console.log("uploadNumPro===>",this.addForm.fileName, this.uploadNumPro);
    },
    videoSuccessUpload(res, file, fileList){
      this.addForm.fileName = res.files[0].path+"."+res.files[0].suffix;
      console.log("uploadNumPro===>",this.addForm.fileName, this.uploadNumPro);

    },
    successAvatarUpload(res, file, fileList) {
      // let image = res.files[0];
      // let imageUrl = this.origin.concat("/", image.fingerprint);
      // this.previewUrl = imageUrl;
      // this.addForm.image = image.fingerprint;
      this.uploadNumPro = this.uploadNumPro + res.files.length;
      this.picList = [];
      this.picList = fileList;
      console.log("uploadNumPro===>",fileList, this.uploadNumPro,this.picList);
    },
    handleRemoveAudio(file, fileList) {
      this.uploadNumPro = this.uploadNumPro - 1;
      this.addForm.fileName = '';
      console.log("uploadNumPro===>",fileList, this.uploadNumPro,this.picList);
    },
    handleRemoveVideo(file, fileList) {
      this.uploadNumPro = this.uploadNumPror - 1;
      this.addForm.fileName = '';
      console.log("uploadNumPro===>",fileList, this.uploadNumPro,this.picList);
    },
    handleRemoveAvatarUpload(file, fileList) {
      this.uploadNumPro = this.uploadNumPro - 1;
      this.picList = [];
      this.picList = fileList;
      console.log("uploadNumPro===>",fileList, this.uploadNumPro,this.picList);
    },
    closeTab() {
      this.$emit("handleClose");
    },
    viewCity() {
      this.treeDialog = !this.treeDialog;
    },
    viewinf(e) {
      this.treeDialog = !this.treeDialog;
      console.log("viewinf==>", e);
      this.addForm.cityList = e;
      this.addForm.location = e
        .map(item => {
          return item.cityName;
        })
        .join(",");
    },
    saveForm(formName, status) {
      let that = this;
      console.log("that subjectId ===>",that.subjectId)
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.fullscreenLoading = true;
          if(that.addForm.type === '2'){
            that.addForm.imageList = [];
            that.picList.forEach(item=>{
              that.addForm.imageList.push(item.response.files[0].fingerprint)
            })
          }
          that.addForm.status = status;
          if(that.subjectId){
            that.addForm.subjectId = that.subjectId
          }
          addPost(that.addForm).then(res => {
            if (res.code == "0") {
              that.fullscreenLoading = false;
              that.$message({ message: "新增成功", type: "success" });
              that.resetForm("addForm");
              that.$emit("saveClose");
            } else {
              that.fullscreenLoading = false;
              that.$message({ message: res.data.msg, type: "error" });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style >
.content-wrapper {
  height: 100%;
  overflow-y: scroll;
}

.content-row {
  height: 94%;
  overflow-y: scroll;
}

.imageFloatLeft {
  width: 40%;
  float: left;
  height: 140px;
  margin-right: 2%;
}

.dialog-footer {
  text-align: center;
}


</style>
